@import "../../style.scss";

.leftbar{
    @include useTheme($themes){
        margin: 0px;
        // border-radius: 10px;
        border-right: solid 1px themed('border');
        position: fixed;
        width: 15%;
        height: 100%;
        left: 0;
        top: 0px;
        // padding: 20px;
        padding-top: 70px;
        background-color: themed('navBarColor');
        overflow: scroll;
        display: flex;
        flex-direction: column;
        &::-webkit-scrollbar{
            display: none;
        }

        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07);
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.07);

        .menu{
            display: flex;
            flex-direction: column;
            // gap: 20px;
            color: themed('textColor');
            .item{
                display: flex;
                align-items: center;
                padding: 20px;
                padding-left: 24px;
                gap: 10px;
                // img{
                //     width: 30px;
                //     height: 30px;
                //     border-radius: 50%;
                //     object-fit: cover;
                // }
                span{
                    font-size: 14px;
                }

            }
            .item:hover{
                color:themed('textColor');
            }
        }
    }

}